<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 10:52:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 09:51:41
 * @Description: 一家十一口(猜一字) 中下 重写
-->
<template>
  <!-- <Card class="card-style"> -->
  <div id="middlelower" style="width:100%; height: 100%;"></div>
  <!-- </Card> -->
</template>

<script>
//import {} from '';
export default {
  name: "MiddleLower",
  data() {
    return {
      chart: null,
      data: [220, 182, 191, 234, 290, 330, 450,300,400,320],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.draw();
  },
  //方法集合
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById("middlelower"));
      this.chart.setOption({
        // 设置图表的标题
        title: {
          text: "暂收集前十名省地区数据",
          x: "center",
          y: "25",
          textAlign: "left",
          textStyle: {
            color: "#31A5DE",
            fontSize: 16,
          },
        },
        color: ["#1CD3F3"],
        tooltip: {},
        // legend: {
        //   orient: "vertical", // 'vertical'
        //   x: "right",
        //   y: "top",
        //   itemWidth: 14,
        //   itemHeight: 7,
        //   icon: "pin",
        //   data: ["城镇用户", "非城镇用户"],
        // },
        grid: {
          left: "15%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
            // splitLine: {
            //   color: "rgba(255, 255, 2555, 0.5)",
            // },
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
            interval: 0,
            formatter: function(value) {
              return value.split("").join("\n");
            },
          },
          axisTick: {
            show: false,
          },
          name: "日期",
          nameLocation: "start",
          data: ["安徽", "河北", "福建", "广东", "广西", "山东", "云南","陕西","河南","江西"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            // lineStyle: {
            //   type: "dashed",
            //   color: "rgba(255, 255, 255, 0.5)",
            // },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "left",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          name: "各地区客群数量(万人)",
          nameLocation: "end",
        }, // 直角坐标系 Y 轴
        series: [
          {
            // name: "保险",
            type: "bar",
            emphasis: {
              itemStyle: {},
            },
            barWidth: "50%", //柱图宽度
            data: this.data,
          },
        ],
      });
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped></style>
